:root {
  --el-color-primary-light-9: white;
  --el-border-radius-base: 2px;
  --el-color-primary-light-5: #007DFF;
  --el-color-primary: #007DFF;

}
.el-tag.el-tag--primary {
  --el-color-primary-light-9: #ecf5ff !important;
}
.el-input,.el-input__wrapper{
  --el-input-bg-color: #F2F3F5;
  --el-disabled-bg-color: white;
  --el-disabled-text-color: #1A1A1A;
  --el-input-border-color:#F2F3F5;
}
.el-form-item__content > div .el-input__wrapper{
  box-shadow: 0 0 0 1px #F2F3F5 inset !important;
}
.el-input .el-input__suffix .el-input__count-inner{
  background-color: #F2F3F5 !important;
}

// ==============================================
.el-tag.el-tag--light{
  --el-tag-border-radius: 2px !important;
  &.el-tag--info{
    background-color: #DCDFE6 !important;
    color: #606266 !important;
  }
  &.el-tag--primary{
    background-color: #D9EDFF !important;
    color: #007DFF !important;
  }
  &.el-tag--danger{
    background-color: #FFE1E1 !important;
    color: #F53F3F !important;
  }
  &.el-tag--warning{
    background-color: #FFF0D9 !important;
    color: #FF9900 !important;
  }
  &.el-tag--success{
    background-color: #E3F9E9 !important;
    color: #14C85C !important;
  }
}

// ==============================================
.el-select,.el-select__wrapper{
  --el-fill-color-light: #F2F3F5;
  --el-fill-color-blank: #F2F3F5;
  --el-border-color: #F2F3F5;
}
.el-select__wrapper.is-disabled{
  --el-fill-color-light: white;
  --el-text-color-placeholder: #1A1A1A;  
  --el-select-disabled-color: #1A1A1A;
  --el-select-disabled-border: #F2F3F5;
}
.el-form-item__content > div .el-select__wrapper.is-disabled{
  box-shadow: 0 0 0 1px #F2F3F5 inset !important;
}
.el-form-item__content > div .el-select__wrapper {
  box-shadow: none !important;
}
// ===============================================
.el-textarea__inner {
  --el-input-bg-color: #F2F3F5;
  --el-input-border-color: #F2F3F5;
  --el-input-hover-border-color: #F2F3F5;
  &:focus{
    --el-input-focus-border-color: #F2F3F5;
  }
}
// ===============================================
.el-upload--picture-card{
  border: none !important;
  --el-fill-color-lighter: #f2f3f5;
  &>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #86909c;
    // height: 100%;
    // width: 100%;
    // padding-top: 16px;
    // box-sizing: border-box;
    &.notuse {
      cursor: not-allowed;
    }
  }
}
.el-upload-list__item{
  overflow: visible !important;
  background-color: #DEEBFF;
  line-height: 40px;
  &:hover{
    --el-fill-color-light: #DEEBFF;
  }

  .el-icon--close{
    display: block !important;
    opacity: 1 !important;
    padding-right: 10px !important;
    --el-text-color-regular: #86909C;    
  }
  .el-upload-list__item-name{
    --el-text-color-regular: #007DFF;
    .el-upload-list__item-file-name{
      flex: 1 !important;
      text-align: left !important;
    }
    .el-icon{
      --el-text-color-secondary: #007DFF;
      background-image: url('@/assets/images/link.png');
      background-size: 100% 100%;
      width: 12px !important;
      height: 12px !important;
      svg{
        display: none !important;
      }
    }
  }
 
}
.el-upload-list__item-status-label{
  display: none !important;
}
.el-upload-list--picture-card {
  .el-upload-list__item{
    border: none !important;
  }
  .el-upload-list__item-thumbnail{
    object-fit: fill !important;
  }
  
  
  .jzt-el-upload-list__item-actions{
    position: absolute;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    --el-overlay-color-lighter: red;
    background-image: url('@/assets/images/del-icon.png');
    background-size: 100% 100%;
    opacity: 1 !important;
    top: -2px !important;
    right: -2px !important;
    left: auto !important;
    background-color: red !important;
    .el-upload-list__item-delete{
      display: block;
      width: 10px !important;
      height: 10px !important;
      right: 0 !important;
      position: relative !important;
      transform: rotate(45deg) !important;
      .el-icon,svg{
        display: none !important;
      }
    }
  }
}
.el-upload-dragger{
  --el-border-color: #606266;  
}
.upload-card.upload-video {
  .el-upload-list__item.is-ready,.el-upload-list__item.is-success {
    width: 125px !important;
  }
}



// ====================================================
.factory-container{
  border-radius: 10px;
  padding: 20px;
}
.text-over {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-break{
  white-space: break-spaces;
  word-break: break-all
}
.action-more{
  position: fixed !important;
}

.upload-card{
  .el-upload.el-upload--picture-card{
    width: 80px !important;
    height: 80px !important;
  }
  .el-upload-list__item.is-ready,.el-upload-list__item.is-success{
    width: 80px !important;
    height: 80px !important;
  }
}

.jzt-blobk{
  display: inline-block;
}
.text-over {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-over2 {
  overflow: hidden;
  text-overflow: ellipsis; 
  white-space: break-spaces;
  word-break: break-all;
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 2;
}
.text-break{
  white-space: break-spaces;
  word-break: break-all
}

.jzt-table.el-table{
  border: 1px solid #dcdfe6 !important;
  &::before{
    height: 0 !important;
  }
  .el-table__empty-block{
    min-height: 300px;
    width: 100% !important;
  }
  th.el-table__cell.is-leaf{
    background-color: #F2F6FC !important;
    border-bottom: 1px solid #dcdfe6 !important;
    color: #909399;
    font-weight: normal;
  }
  .el-table.is-scrolling-none th.el-table-fixed-column--right,
  .el-table.is-scrolling-none th.el-table-fixed-column--left{
    background-color: #F2F6FC !important;
  }
  .el-table__body tr.el-table__row--striped td.el-table__cell{
    background-color: #F5F7FA !important;
  }
  .el-table__cell{
    padding: 14px 0 !important;
  }
  td.el-table__cell{
    border-bottom: 1px solid #dcdfe6 !important;
  }
  .el-table__row:last-of-type{
    .el-table__cell{
      // border-bottom-color: transparent !important;
    }
  }
  .el-table__inner-wrapper::before{
    height: 0 !important;
  }
}

.jzt-select-input.el-input{
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  .el-input-group__prepend{
    --el-input-border-radius: 4px;
  }
  .el-input__wrapper{
    --el-input-bg-color: white;
    box-shadow: none !important;
    border-radius: 4px;
  }
  .el-form-item__content > div .el-input__wrapper{
    box-shadow: none !important;
  }
  .el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger{
    --el-border-radius-base: 4px;
    border-right: 1px solid #DCDFE6;
    background-color: white !important;
    box-shadow: none !important;
  }
  &.is-disabled .el-input__inner{
    --el-disabled-text-color: #C0C4CC;
  }
}

.jzt-range-date-picker{
  position: fixed !important;
}

.jzt-button.el-button{
  &.el-button--info{
    background-color: #f2f3f5;
    color: #1d2129;
    border: none;
    &:hover{
      background-color: #f2f3f5;
      color: #1d2129;
    }
  }
}

.jzt-tree.el-tree.el-tree--highlight-current{
  .el-tree-node.is-current{ 
    --el-color-primary-light-9: #d9e8ff !important;
    color: #007dff;
  }
}

.jzt-flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.jzt-flex-start{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.jzt-flex-end{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.jzt-flex-bt{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jzt-input-number.el-input-number.is-controls-right{
  .el-input-number__decrease,
  .el-input-number__increase {
    display: none;
    text-align: center;
  }
  .el-input__inner {
    text-align: left;
  }
  &:hover{
    .el-input-number__decrease,
    .el-input-number__increase {
      display: block;
    }
  }
  &.jzt-input-number-hidden{
    position: relative;
    .el-input__wrapper{
      padding-right: 20px !important;
    }
    &.suffix{
      .el-input__wrapper::after{
        position: absolute;
        content: '%';
        color: #1a1a1a;
        right: 10px;
        font-size: 12px;
      }
    }
    &:hover{
      .el-input-number__decrease,
      .el-input-number__increase {
        display: none;
      }
    }
  }
}

.jzt-input-number.el-input-number.is-controls-right{
  .el-input-number__decrease,
  .el-input-number__increase {
    display: none;
    text-align: center;
  }
  .el-input__inner {
    text-align: left;
  }
  &:hover{
    .el-input-number__decrease,
    .el-input-number__increase {
      display: block;
    }
  }
  &.jzt-input-number-hidden{
    position: relative;
    .el-input__wrapper{
      padding-right: 20px !important;
    }
    &.suffix{
      .el-input__wrapper::after{
        position: absolute;
        content: '%';
        color: #1a1a1a;
        right: 10px;
        font-size: 12px;
      }
    }
    &:hover{
      .el-input-number__decrease,
      .el-input-number__increase {
        display: none;
      }
    }
  }
}

.jzt-drawer.el-drawer{
  box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
  border-radius: 10px 0px 0px 10px;
}

.jzt-flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.jzt-flex-bt{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


@for $i from 12 through 60 {
  .f#{$i} {
    font-size: $i * 1px !important;
  }
}
@for $i from 0 through 100 {
  .pd#{$i} {
    padding: $i * 1px !important;
  }
  .pt#{$i} {
    padding-top: $i * 1px !important;
  }
  .pb#{$i} {
    padding-bottom: $i * 1px !important;
  }
  .pl#{$i} {
    padding-left: $i * 1px !important;
  }
  .pr#{$i} {
    padding-right: $i * 1px !important;
  }
}
@for $i from 0 through 100 {
  .mg#{$i} {
    margin: $i * 1px !important;
  }
  .mt#{$i} {
    margin-top: $i * 1px !important;
  }
  .mb#{$i} {
    margin-bottom: $i * 1px !important;
  }
  .ml#{$i} {
    margin-left: $i * 1px !important;
  }
  .mr#{$i} {
    margin-right: $i * 1px !important;
  }
}
@for $i from 0 through 200 {
  .wd#{$i} {
    width: $i * 1px !important;
  }
}
@for $i from 0 through 200 {
  .ht#{$i} {
    height: $i * 1px !important;
  }
}